約 3,898,927 件
https://w.atwiki.jp/saicron/pages/69.html
Programming Language/JavaScript/JavaScript サンプル Contents Programming Language/JavaScript/JavaScript サンプルContents 電卓 電卓 JavaScriptサンプル(簡易電卓) - とほほのWWW入門 電卓に挑戦 - イヌでもわかるJavaScript講座 シンプル電卓 - ささら庵 関数電卓（JavaScript版） - 中川雅央氏（滋賀大学） page top
https://w.atwiki.jp/m_shige1979/pages/1013.html
記述サンプル body タグ内に記述 hoge1.html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title /head body script type="text/javascript" !-- document.write("Hello World"); // -- /script /body head タグ内に記述 hoge2.html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title script type="text/javascript" !-- document.write("Hello World２"); // -- /script /head body /body head タグ内の外部ファイルを定義 hoge3.html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title script type="text/javascript" src="./js_test3.js" /script /head body /body js_test3.js document.write("Hello World３");
https://w.atwiki.jp/matsutips/pages/14.html
サンプルコード集 有名なテンプレート サンプルコード集 http //www.openspc2.org/reibun/javascript/ 有名なテンプレート prototype http //www.prototypejs.org/ http //www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Whatsthat rico http //www.openrico.org/ aculo.us http //script.aculo.us/
https://w.atwiki.jp/kayo_2525/pages/5.html
大見出し 書き方？ 中見出し HTMLファイルに書く場合：ヘッダ・ボディ・タグの3ヶ所に書けます。
https://w.atwiki.jp/sevenlives/pages/234.html
JavaScript【ジャバスクリプト】 読み：じゃばすくりぷと 英語：JavaScript 意味： Netscape Communicationsが開発したスクリプト言語?。 プロトタイプオブジェクト指向であり主な用途はwebブラウザ(クライアント側)で働く言語。 これによりクライアント側での動きのある柔軟なページが可能となった。 クライアント側で作用するためブラウザさえあれば簡単に動かせる。 当初はLiveScriptと呼ばれていたが当時話題のJava言語の名をつけ、JavaScriptと変更してしまった。Javaとは別の言語。 JavaScriptもオブジェクト指向であるがJavaやC++などのクラスベースのオブジェクト指向ではないためオブジェクト指向を使いこなすにはJavaScript用のプロトタイプベース・オブジェクト指向の理解が必要。実体はハッシュのようにシンプルでプロトタイプ・チェーンなど理解すれば、非常に柔軟な使い方ができます。 ブラウザやバージョンによって実装が微妙に違うためまた、最近の言語に多いエラー表示機能はないのでバグ処理が困難でした。しかしFirefoxのアドオンであるFirebugなどが開発されかなりその環境も大きく改善されています。 容易に書けるためセキュリティホールなどが発生しやすく、１度廃れてしまった経緯がある。 しかしGoogleによってJavaScriptを大いに活用したAjaxという使い方でフレキシブルなページが注目を浴び、一躍注目の言語に復活しました。 時代の変化やWebブラウザの独自機能などのため仕様がどんどん拡張、変更しており DOM、XMLHttpRequestからjQueryなどのライブラリの活用までトレンド変化の激しい言語だとも言えます。 2019年03月07日 ECMAScriptECMAScript 3? ECMAScript 4? ECMAScript 5? ECMAScript 6 ECMAScript 2016? ECMAScript 2017? JScript CoffieScript? Dart? JSS? ダイナミック言語? altJS Toy language? サンドボックス 同一出身ポリシー Dynamic HTML【DHTML】バリアントタイプ【variant type】 イベント・ハンドラ イベント・リスナ(JavaScript) ブックマークレット ロールオーバー ウィジェット ビヘイビア ActionScript? サーバーサイドJavaScript ユーザー・エージェント? クライアント・スニファ? HTA LiveConnect? 関数(JavaScript) スコープ(JavaScript)グローバル変数(JavaScript)? ローカル変数(JavaScript) グローバル・コード リテラル(JavaScript)?関数リテラル 配列リテラル オブジェクト・リテラル strictモード JsTestDriver? JavaScriptシェル? Signed Scripts? JSDoc? JsDoc Toolkit 控えめなJavaScript ■ プロトタイプベース・オブジェクト指向? プロパティ(JavaScript) メソッド(JavaScript)? オブジェクト(JavaScript)? コンストラクタ(JavaScript) for in 構文 プロトタイプ(JavaScript) オブジェクト・リテラル ラッパー・オブジェクト(JavaScript)? レキシカルスコープ スコープ・チェーン コンストラクタ・チェーン? ハッシュ? 匿名関数 高階関数 クロージャ(JavaScript) 変数オブジェクト? 関数オブジェクト 匿名オブジェクト? プロトタイプ・オブジェクト? ビルトイン・オブジェクト グローバル・オブジェクト ホストオ・ブジェクト? プロトタイプ・チェーン? 実行コンテキスト(JavaScript) Activation Object 暗黙の参照? ガーベージ・コレクション JSON DOM(JavaScript) 属性?DontEnum ReadOnly? DontDelete Internal? ■ 型 数値型(Number) 文字列型(String)? 論理型(Boolean)? オブジェクト型(Object)? 配列型(Array)? var? null undefine NaN Infinity? ■ スクリプト・エンジン(JavaScript)? SpiderMonkey ActionMonkey? TraceMonkey JaegerMonkey V8 Carakan? Futhark? Tamarin Rhino JavaScriptCore Chakra? ■ JavaScriptライブラリ prototype.js YUI Library jQuery JSAN? ■ JavaScriptフレームワーク GWT? Adobe Spry? Dojo Toolkit? Ext JS? AngularJS? Backbone.js React.js? Knockout.js? Ember.js? イベントドリブン イベントバブルアップ? XMLHttpRequest ■ クロスブラウザ Internet Explorerキオスクモード? Firefox Unobtrusive Scripting
https://w.atwiki.jp/cz8686/pages/13.html
[JavaScript] 数値チェック function CheckNum(value) { var str = value; if ( isNaN(str) == true ){ return false; } return true; } ▼使用例 ※数値でない場合(falseを返す場合)、フラグを立てる。 if ( CheckNum(form_value) == false) { numFlg = 1; } [JavaScript] DHTMLによる表示・非表示 script language="JavaScript" !-- function show(id) { if (document.all) { document.all.item(id).style.visibility = "visible"; } else if (document.layers) { document.layers[id].visibility = "show"; } else if (document.getElementById) { document.getElementById(id).style.visibility = "visible"; } } function hide(id) { if (document.all) { document.all.item(id).style.visibility = "hidden"; } else if (document.layers) { document.layers[id].visibility = "hide"; } else if (document.getElementById) { document.getElementById(id).style.visibility = "hidden"; } } // -- /script a href="wwwssi.htm" onmouseover="show( id1 )" onmouseout="hide( id1 )" SSI入門 /a span id=id1 style="visibility hidden" ilayer name=id1 visibility="hide" - 「とほほのSSI入門」にジャンプします。 /ilayer /span br a href="wwwcgi.htm" onmouseover="show( id2 )" onmouseout="hide( id2 )" CGI入門 /a span id=id2 style="visibility hidden" ilayer name=id2 visibility="hide" - 「とほほのCGI入門」にジャンプします。 /ilayer /span [JavaScript] DHTMLサンプル HTML HEAD Script Language="JavaScript" Type="text/javascript" !-- function test1(){ // 色の変更 document.all("T1").style.color="red"; // フォーム背景色の変更 document.all("T2").style.backgroundColor="red"; // inntertext の変更 document.all("T3").innerText = "kakikukuko"; // innerHTML の変更 document.all("T4").innerHTML = " TEXTAREA fadsfdaf br dfafdaf /TEXTAREA " } // -- /Script /HEAD BODY FORM NAME="f1" INPUT TYPE="TEXT" NAME="TEST1" VALUE="AAAAA" ID="T1" INPUT TYPE="TEXT" NAME="TEST2" VALUE="あいうえお" ID="T2" BR DIV ID="T3" かきくけこ /DIV BR DIV ID="T4" abcdefg /DIV INPUT TYPE="BUTTON" VALUE="テスト" onClick="javascript test1();" /FORM /BODY /HTML [JavaScript] ブラウザの戻るボタンを無効にする （戻りたくない画面に） SCRIPT history.forward(); /SCRIPT を記述しておく [JavaScript] 右クリック禁止１ Script Language="JavaScript" Type="text/javascript" !-- function notes(eve){ if(document.all){ /*IEの場合*/ if(event.button == 2){ alert("右クリック禁止！"); return false; } } if(document.layers){ /*Netscape4.Xの場合*/ if(eve.which == 3){ alert("右クリック禁止！!"); return false; } } } if(document.layers)document.captureEvents(Event.MOUSEDOWN); document.onmousedown=notes; // -- /Script [JavaScript] 右クリック禁止２ BODY oncontextmenu="alert( 右クリックは禁止です。 );return false;" BGCOLOR="#C0C0C0" TEXT="#000000" ALINK="RED" VLINK="BLUE" [JavaScript] 新規Windowオープン(GET引数) function new_window_open2 (a,b,c,d,e,f){ if (f==""){f="no";} var w = window; if ((w == window) || win_00.closed) { w = open("",b,"width="+c+",height="+d+",toolbar=no,menubar="+f+",location=no,scrollbars="+e+",status=yes,resizable=yes"); w.document.write(" marquee "); w.document.write(" span style= font bold;color #ff0000;font-size 10pt; "); w.document.write("ただいま処理しております。 br しばらくお待ちください。"); w.document.write(" /span "); w.document.write(" /marquee "); w.location.replace(a); } else { w.location.replace(a); } w.focus(); return(w); } ▼使用例 Script Language="JavaScript" Type="text/javascript" !-- function PAGE_TEST1(){ var w_url="PAGE_TEST1I"+ "?W_FORM_NAME1=form1.W_KYU_KUNITOSHI_CD"+ " W_FORM_NAME2=form1.W_KYU_KUNI_MEI"+ " W_FORM_NAME3=form1.W_KYU_TOSHI_MEI"+ ""; } // -- /Script [JavaScript] 全角文字チェック function CheckZenkaku(str){ str2 = str.replace(/[ ]/g,""); for (var i = 0; i str2.length; i++) { var c = str2.charCodeAt(i); // Shift_JIS 0x0 ～ 0x80, 0xa0 , 0xa1 ～ 0xdf , 0xfd ～ 0xff // Unicode 0x0 ～ 0x80, 0xf8f0, 0xff61 ～ 0xff9f, 0xf8f1 ～ 0xf8f3 if ( (c = 0x0 c 0x81) || (c == 0xf8f0) || (c = 0xff61 c 0xffa0) || (c = 0xf8f1 c 0xf8f4)) { return false; } } return true; } ▼使用例 if (CheckZenkaku(form_value) == false) { message = message + "氏名に全角以外の文字が含まれています\nすべて全角文字で入力してください"; alert(message); return false; } [JavaScript] 送信ボタン連打防止 ●ボタン連打を防ぐ ///////////////////////////////////////////////////////// ■使用方法 ：以下の文をカットアンドペーストして使う ■説明 ：サブミット時のボタン連打を防ぐ ///////////////////////////////////////////////////////// SCRIPT LANGUAGE="JavaScript" !-- sent = false; function send_check(){ if(sent){ return false; }else{ sent = true; return true; } } // -- /SCRIPT ●別例 二重投稿禁止 form onsubmit="for (i=0;i this.length;i++) {if (this[i].type == submit ) this[i].disabled = true}" フォームのボタンは、たまにですが過敏に反応しすぎて二度押したように判断する時があります。 例えば掲示板なら、同じ記事を即時に二回送信してしまうわけです。 このパターンの二重投稿はJavaScriptで回避できるのでした。 [JavaScript] 日付(YYYYMMDD)妥当性チェック関数 ※ myGetYearとセットで使用 function CheckDate(value) { var flg; var year; var month; var date; flg = value.match(/(\d{8})/); if ( !flg ) { return false; }else{ year = value.substring(0,4); month = value.substring(4,6); date = value.substring(6,8); newdate = new Date(year,month-1,date) if ( myGetYear(newdate) != year || (newdate.getDate() != date) || (month != newdate.getMonth()+1)) { return false; } return true; } } function myGetYear(dobj) { var year ; year = dobj.getYear() ; if (year 1900) { year += 1900; } return year; } [JavaScript] 履歴を残さずに画面遷移 HTML HEAD TITLE /TITLE SCRIPT language="JavaScript" !-- function pageReplace(){ window.location.replace("history9.htm"); } // -- /SCRIPT /HEAD BODY CENTER A href="javascript pageReplace()" 指定したページへ移動 /A BR BR FORM INPUT type="button" value="指定したページへ移動" onClick="pageReplace()" /FORM /CENTER /BODY /HTML [javascript] WindowOpen用の共通関数 function new_window_open2 (a,b,c,d,e,f){ if (f==""){f="no";} var w = window; if ((w == window) || win_00.closed) { w = open("",b,"width="+c+",height="+d+",toolbar=no,menubar="+f+",location=no,scrollbars="+e+",status=yes,resizable=yes"); w.document.write(" marquee "); w.document.write(" span style= font bold;color #ff0000;font-size 10pt; "); w.document.write("ただいま処理しております。 br しばらくお待ちください。"); w.document.write(" /span "); w.document.write(" /marquee "); // w.location.href=a; w.location.replace(a); } else { // w.location.href=a; w.location.replace(a); } w.focus(); return(w); }
https://w.atwiki.jp/api_programming/pages/40.html
下位ページ AngularJS Date（日付・時刻） jQuery jQuery Mobile jQuery-UI イベント制御 オブジェクト ダイアログ(Dialog) 変数・演算子 文字列(String) 構文・処理 表示 連想配列 配列 関数 非同期処理 Content コードの記述方法HTMLページ内に記述 コードの実行タイミングDOMが構築されている途中 DOMが構築されてから 関数の定義function文による定義 デフォルト引数の設定 引数は参照渡しか値渡しか？ テキストボックスの値を取得するid属性で指定する場合 name属性で指定する場合 クッキーの操作書き込み設定値を加える 読み出し 正規表現 タイマーの利用と停止 ポップアップウィンドウ getで指定するパラメータを、エンコード／デコードする 配列のソート ページの遷移 / リダイレクト任意のページに移動 履歴の前後に移動 Dateオブジェクトの計算 即時関数即時関数のポイント JSPの変数をJavascriptに渡す。 Javascriptの変数をJavaに渡す コメント1行コメント 複数行コメント タッチデバイスへの対応 JSONデータの読み込み ウィンドウサイズの取得 コードの記述方法 http //www.openspc2.org/JavaScript/study/script.html HTMLページ内に記述 SCRIPT /SCRIPT type="text/javascript" language="~" でバージョン指定も可能 コードの実行タイミング .onload .ready DOMが構築されている途中 script /script の中に書くと、読み込まれた時点で実行される。 DOMが構築されてから document.ready DOMツリーは構築されているが、まだ外部からのロードは始まっていない。 window.onload 既に画像のレンダリングも終わった状態 window.onload = function(){...} [[]] 【JavaScript】記述方法別の実行タイミングについて -Qiita 関数の定義 http //www.atmarkit.co.jp/ait/articles/0707/10/news124.html] function文による定義 Functionコンストラクタによる定義 関数リテラルによる定義 function文による定義 function 関数名([引数1 [, 引数2 [, ……]]) { [関数内で実行される任意の命令……] } デフォルト引数の設定 = で事前設定しておくと、デフォルト扱いになる。 function testfunc(a, b = null) もし function testfunc(a = null, b) で、引数 testfunc(1) にしたら、a = 1, b = undefined になる。 デフォルト引数 引数は参照渡しか値渡しか？ オブジェクト、配列は参照渡し 数、文字列は値渡し http //so-zou.jp/web-app/tech/programming/javascript/grammar/function/#no13 テキストボックスの値を取得する id属性で指定する場合 document.forms.(参照するフォームのid).(参照するコントロールのid) name属性で指定する場合 document.forms.(参照するフォームのname).(参照するコントロールのname) iPentec クッキーの操作 document.cookieでアクセスが可能 クッキーの使用方法 - JavaScript プログラミング解説 書き込み =（イコール）で、変数と値をセットにして書き込み document.cookie="変数=値" 設定値を加える 寿命を2時間(7200秒）に設定する document.cookie="key=value; max-age=7200" 読み出し document.cookie を読み込めば、そのまま取得できるが、 key1=value1;key2=value2;key3=value3 となるので、分割する必要あり 文字列の分割 正規表現 チェック、置換、該当部分の抜き出しが可能チェック、該当部分の取り出し match 置換 replace Javascriptでの正規表現の利用 タイマーの利用と停止 setInterval関数 返り値がtimerIDで、clearInterval(timerID)で停止させる。 https //techacademy.jp/magazine/5537 ポップアップウィンドウ window.openで開く。戻り値としてウィンドウオブジェクトが返ってくる。これを監視していれば、閉じたかどうか分かる。 http //amenti.usamimi.info/windowopen.html getで指定するパラメータを、エンコード／デコードする encodeURIComponent decodeURIComponent どちらも組み込み関数 http //itpro.nikkeibp.co.jp/article/Reference/20081126/319910/?ST=oss 配列のソート array.sort(comparefunction) comparefunctionは、比較関数を定義する comparefunction(a,b)が返す値が負の時は a→bの順に、正の時は b→a の順に並べる。0なら等しいとする。 Array.sort - Javascript | MDN ページの遷移 / リダイレクト 任意のページに移動 location.href = (URL) 履歴の前後に移動 戻る history.back(); 進む history.forward(); Dateオブジェクトの計算 Date.setMonth(Date.getMonth - 1) のようにすれば計算できる。マイナスの値も（上記のように「月」の場合は「年」が一年遡る） でも、setMinutes(...)とか、戻り値がDateオブジェクトのms変換値が入る。なんでだよ。 Date(ms)で再作成。 その他 日付と時刻の計算 (JavaScript) - MSDN Date 即時関数 (function(){... )()} 即時関数というらしい。即、実行される。 即時関数のポイント 関数が、グローバルに設定されない。 → リソースの節約 関数内で設定された変数は、当然ローカル 知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て JSPの変数をJavascriptに渡す。 getAttributeで素直に渡せるみたい。 Servlet/JSPのデータをJavaScriptに渡す方法 Javascriptの変数をJavaに渡す 確認中 https //dev.mozilla.jp/localmdc/localmdc_8833.html コメント 1行コメント // コメント 複数行コメント /* コメント */ タッチデバイスへの対応 いろいろあるが jQuery Finger JSONデータの読み込み obj = JSON.parse(data) で読み込める。連想配列の状態で格納されている。 JSON.parse() - MDN JSON - MDN ウィンドウサイズの取得 window.parent.screen.width; // 高さ window.parent.screen.height; // 幅 window.onresize = getScreenSize(); // ウィンドウのリサイズ時に発火 //画面サイズを取得する function getScreenSize() { var s = "横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height; document.getElementById("ScrSize").innerHTML = s; }
https://w.atwiki.jp/f_go/pages/181.html
ツール系 javascript/サーヴァント経験値計算 javascript/成長曲線 javascript/サーヴァント一覧 javascript/skilllist (スキル一覧) 表示用 javascript/gallery （スライドショー用） javascript/twitter javascript/zeb_row （table） javascript/page-bottom javascript/itemicon javascript/statuscalc (鯖詳細ページのHP/ATK自動挿入) javascript/truename (左メニュー用の真名隠し設定) javascript/common-style 各種javascriptのstyle集約(atwiki仕様変更に備えて) javascript/keepedopenclose (折りたたみ状態を記憶するopencloseプラグインもどき) javascript/rmyet (未作成ページ一覧から不要な行を削除する。) javascript/announce (告知用のいろいろ) javascript/tablefilter (表の絞り込み) javascript/npsort (NP獲得効率専用) javascript/sortabletable (pukiwikiのsortabletableプラグインのjs実装)使い方 規制 javascript/pcomment_hide javascript/pcomment_hide_all コメント調整 javascript/pcomment_display javascript/tabs javascript/commentics 更新履歴 javascript/recent_cmlog_only 編集者向け javascript/クエスト情報変換 javascript/クエスト情報変換【タブ用】 javascript/アイテム要求数 （即席） javascript/過去ログ作成 （即席） 確認用 javascript/test javascript/test-style その他 javascript/menu javascriptに詳しい方、得意な方、よければ助言願います。 「こんなツールが欲しい」「こんな機能を追加して欲しい」などあれば、掲示板/編集掲示板まで。
https://w.atwiki.jp/m_shige1979/pages/712.html
JavaScript 記述サンプル 変数 定数 データ型 演算子 配列 連想配列 条件分岐 繰り返し 繰り返し制御 例外処理 関数 関数（クロージャ） オブジェクト指向構文 オブジェクト 組み込みオブジェクト ブラウザオブジェクト DOMオブジェクト Ajaxオブジェクト ライブラリ 汎用 prototype.js JQuery 表 Super_Tables tablesort グラフ graph_radar graph_vbar graph_circle glaph_line flotr2 Canvas jCanvas EaselJS cakejs KineticJS サジェスト機能 suggest.js フレームワーク jQuery Mobile Backbone.js AngularJS Knockout.js Ember.js Spine.js ゲーム enchant.js テスト JsUnit Mocha Jasmine Qunit JSTestDriver sinon.js 解析 Jscoverage JSHint ドキュメント JsDoc コード圧縮 圧縮 難読化 整形
https://w.atwiki.jp/comcatet/pages/29.html
Dateオブジェクト XMLHttpRequest プロトタイプチェーンとクラス ループ処理 内包表記 ES5setter - JavaScript | MDN getter - JavaScript | MDN ES6の実験機能アロー関数Arrow functions - JavaScript | MDN Firefox 22(Nightly) で ArrowFunction が実装されたが、扱いが難しい - hogehoge @teramako 自身のthisを持たない 自身のargumentsを持たない(fx43から) デフォルトパラメーターDefault parameters - JavaScript | MDN ES.next のデフォルトパラメータが Firefox Nightly で実装された - hogehoge @teramako Rest parameterRest parameters - JavaScript | MDN ES.next の FunctionRestParameter が Firefox Nightly で実装された - hogehoge @teramako Spread operatorSpread operator - JavaScript | MDN Method definitionMethod definitions - JavaScript | MDN function*function* - JavaScript | MDN クラスClasses - JavaScript | MDN JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう | HTML5Experts.jp 分割代入Destructuring assignment - JavaScript | MDN JavaScript の分割代入まとめ - mooz deceives you